<template>
	<view class="header">
		<!-- <u-navbar :border-bottom="false" title="巨能降	" title-size="32" title-width="500" class="nav"></u-navbar> -->
		<u-sticky offset-top="0">

			<view style="background-color: #fff;padding-bottom: 30rpx;padding-top: 30rpx;">
				<view class="search">
					<u-search v-model="searchKey" placeholder="搜索品牌/车型" :show-action="false" @search="onSearch" @change="change"></u-search>
				</view>
			</view>

			<view class="item">
				<u-dropdown ref='paymentSort' active-color='#FBB000' @open='open' @close="close" :class="isOpen ? 'down-open':'down-close'">

					<!-- 智能排序 -->
					<u-dropdown-item :title="sortTitle">
						<view class="dropdown2" style="height: 170rpx;">
							<view v-for="(item,index) in paymentsSort" :key='item.id' @click="paymentSort(item)" class='sortList'>
								<view :class="{'active': paymentValue === item.id}">{{item.name}}</view>
							</view>
						</view>
					</u-dropdown-item>
					<u-dropdown-item title="品牌">
						<view style="background-color: #FFFFFF;">
							<brand-list @close="closePayment" @change="brandListChange" :height="1000+'rpx'"></brand-list>
						</view>
					</u-dropdown-item>
				</u-dropdown>

				<!-- 重置 -->
				<view class="reset">
					<scroll-view scroll-x='true' class="scroll ">
						<view class="reset-history flex flex-ai-c">
							<view class="reset-name flex flex-jc-c" v-show="history.brand!==''">
								<view>{{history.brand}}</view>
								<view @click="delBrand">
									<i-icon icon="iconguanbi" size="26rpx"></i-icon>
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="reset-right flex flex-ai-c" @click="reset">
						<view style="margin-right: 10rpx;">
							<i-icon icon="iconzhongzhi" size="27rpx"></i-icon>
						</view>
						<view>重置</view>
					</view>
				</view>
			</view>
		</u-sticky>
		<page-loading :show='pageLoading'>
			<view class="content">
				<carList :carlist='carlist'></carList>
				<view class="defaultMap" v-show="isShow && carlist.length===0">
					<image src="https://files.yzsheng.com/bussiness/imgs/tu@2x.png"></image>
					<view class="texna">
						暂无更多信息，看看其他的吧
					</view>
				</view>
				<u-loadmore :status="loadStatus" v-show="carlist.length" @loadmore="more" margin-top="50"/>
			</view>
		</page-loading>
	</view>
</template>

<script src='./giant_nengjiang.js'>

</script>

<style lang="scss" scoped>
	@import '../downPayment/downPayment.scss';

	//默认图
	.defaultMap {
		padding-top: 100rpx;
		width: 750rpx;
		position: fixed;
		// height: 85vh;
		text-align: center;

		image {
			width: 263rpx;
			height: 277rpx;
		}

		.texna {
			font-size: 28rpx;
			color: #999999;
		}
	}

	.header {
		background-color: #fff;
	}

	.item {
		background-color: #fff;
		margin-top: 10rpx;
	}
</style>
